/**
 * 定制器预览脚本
 *
 * @package WP_Bootstrap_Woo
 */

(function($) {
    'use strict';

    // 站点标题
    wp.customize('blogname', function(value) {
        value.bind(function(to) {
            $('.site-title a').text(to);
        });
    });

    // 站点描述
    wp.customize('blogdescription', function(value) {
        value.bind(function(to) {
            $('.site-description').text(to);
        });
    });

    // 主要颜色
    wp.customize('wp_bootstrap_woo_primary_color', function(value) {
        value.bind(function(to) {
            updatePrimaryColor(to);
        });
    });

    // 辅助颜色
    wp.customize('wp_bootstrap_woo_secondary_color', function(value) {
        value.bind(function(to) {
            updateSecondaryColor(to);
        });
    });

    // 容器宽度
    wp.customize('wp_bootstrap_woo_container_width', function(value) {
        value.bind(function(to) {
            updateContainerWidth(to);
        });
    });

    // 顶部通知栏显示/隐藏
    wp.customize('wp_bootstrap_woo_show_top_bar', function(value) {
        value.bind(function(to) {
            if (to) {
                $('.top-notification-bar').show();
            } else {
                $('.top-notification-bar').hide();
            }
        });
    });

    // 顶部通知栏文本
    wp.customize('wp_bootstrap_woo_top_bar_text', function(value) {
        value.bind(function(to) {
            $('.notification-free').html(to);
        });
    });

    // 版权文本
    wp.customize('wp_bootstrap_woo_copyright_text', function(value) {
        value.bind(function(to) {
            $('.site-info').html(to);
        });
    });

    // 支付图标显示/隐藏
    wp.customize('wp_bootstrap_woo_show_payment_icons', function(value) {
        value.bind(function(to) {
            if (to) {
                $('.payment-icons').show();
            } else {
                $('.payment-icons').hide();
            }
        });
    });

    // 博客布局
    wp.customize('wp_bootstrap_woo_blog_layout', function(value) {
        value.bind(function(to) {
            var $container = $('.blog-container');
            $container.removeClass('layout-grid layout-list');
            $container.addClass('layout-' + to);
        });
    });

    /**
     * 更新主要颜色
     */
    function updatePrimaryColor(color) {
        var css = ':root { --primary-color: ' + color + '; }';
        updateCustomCSS('primary-color', css);
    }

    /**
     * 更新辅助颜色
     */
    function updateSecondaryColor(color) {
        var css = ':root { --secondary-color: ' + color + '; }';
        updateCustomCSS('secondary-color', css);
    }

    /**
     * 更新容器宽度
     */
    function updateContainerWidth(width) {
        var css = '.container { max-width: ' + width + 'px !important; }';
        updateCustomCSS('container-width', css);
    }

    /**
     * 更新自定义CSS
     */
    function updateCustomCSS(id, css) {
        var $style = $('#customizer-' + id);
        
        if ($style.length) {
            $style.html(css);
        } else {
            $('head').append('<style id="customizer-' + id + '">' + css + '</style>');
        }
    }

})(jQuery);